import React, { Component } from "react";
import { connect } from "react-redux";
import "./Settransactionpassword.scss";
import yhTools from "../../../tools/yh";
import { getPayDatas } from "../../../Redux/Action/nativeDatas/nativeDatas";
import MainLayout from "../../../component/mainLayout/mainLayout";
import XHFConfig from "../../../config/XHFConfig";
import { Toast } from "antd-mobile";
import keyboard from "../../../images/keyboard.png";
import keyboarddelect from "../../../images/keyboarddelect.png";
const showMsgOnce = "请设置支付密码";
const showMsgTwice = "请再次确认支付密码";
// 较弱密码列表
const SimplePwd = [
	"111111",
	"222222",
	"333333",
	"444444",
	"555555",
	"666666",
	"777777",
	"888888",
	"999999",
	"000000",
	"123456",
	"234567",
	"345678",
	"456789",
	"987654",
	"876543",
	"765432",
	"654321",
	"543210",
	"012345",
	"098765",
	"567890"
];

class Settransactionpassword extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showMsg: showMsgOnce,
			inputTextArray: [], // 输入数组
			pwdOnce: "", // 第一次支付密码
			pwdTwice: "", // 第二次输入支付密码
			tips: "",
			flag: true //默认关闭sdk
		};
	}

	componentDidMount() {
		if (this.props.location.query) {
			this.setState({
				flag: false
			});
		}
	}

	/**
	 * 键盘点击事件
	 * @param {} number
	 */
	handlerKeyBoard(number) {
		let _tempInpArray = this.state.inputTextArray;
		if (number == "X") {
			// 删除
			if (_tempInpArray.length > 0) {
				_tempInpArray.pop();
			} else {
				return;
			}
		} else if (_tempInpArray.length < 6) {
			_tempInpArray.push(number + "");
		} else {
			return;
		}
		this.inputPwd(_tempInpArray);
	}

	/**
	 * 设置密码
	 *
	 * @param {*} pArray
	 */
	inputPwd(pArray) {
		if (pArray.length == 6) {
			// 判断输入次数
			if (this.state.pwdOnce == "") {
				// 第一次输入
				let _tempPwd = pArray.join("");
				if (this.checkSimplePwd(_tempPwd)) {
					this.setState({
						pwdOnce: "",
						pwdTwice: "",
						inputTextArray: [],
						showMsg: showMsgOnce,
						tips: "密码过于简单"
					});
				} else {
					this.setState({
						pwdOnce: _tempPwd,
						inputTextArray: [],
						showMsg: showMsgTwice
					});
				}
			} else {
				// 第二次输入
				let _tempPwd = pArray.join("");
				if (this.state.pwdOnce == _tempPwd) {
					// 两次输入密码匹配
					this.setState({
						pwdTwice: _tempPwd,
						inputTextArray: pArray
					});
				} else {
					this.setState({
						pwdOnce: "",
						pwdTwice: "",
						inputTextArray: [],
						showMsg: showMsgOnce,
						tips: "两次密码不一致"
					});
				}
			}
		} else {
			this.setState({
				inputTextArray: pArray,
				tips: ""
			});
		}
	}

	// 筛查简单的密码设置
	checkSimplePwd(e) {
		if (SimplePwd.indexOf(e) > -1) {
			return true;
		} else {
			return false;
		}
	}

	// 提交
	submit() {
		if (this.state.pwdTwice == "") {
			return false;
		}
		Toast.loading("加载中...", 100);
		//console.log(this.state);

		let objs = {
			url: XHFConfig.setPwd,
			params: {
				// mobilePhone: this.state.phone,
				tradePwd: this.state.pwdOnce
			},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			if (res.code == "0") {
				window.sessionStorage.removeItem("myProtocolList");
				Toast.hide();
				Toast.info("密码设置成功", 2);
				if (this.props.location.query) {
					if (this.props.location.query.name == "index") {
						this.props.history.push("/xhqbIndex");
					} else if (this.props.location.query.name == "recharge") {
						this.props.history.push("/xhqbrecharge");
					} else if (this.props.location.query.name == "myProtocolList") {
						setTimeout(() => {
							yhTools.closePage({ flag: "pageXiaoHuiPaySetPwd" });
						}, 2000);
					} else if (this.props.location.query.name == "wallet") {
						// 新版收银台
						setTimeout(() => {
							// 通知生活支付结果
							yhTools.noticePaySuccess("支付成功");
						}, 2000);
					}
				} else {
					setTimeout(() => {
						yhTools.closePage({ flag: "pageXiaoHuiPaySetPwd" });
					}, 2000);
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	render() {
		const headerParams = {
			header: {
				title: "设置支付密码",
				goBackAction: () => {
					if (this.state.flag) {
						if (this.props.location.query.name == "wallet") {
							// 新版收银台
							// 通知生活支付结果
							yhTools.noticePaySuccess("支付成功");
						} else {
							yhTools.closePage();
						}
					} else {
						this.props.history.goBack();
					}
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: "1" // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		return (
			<MainLayout pageParams={headerParams}>
				<div className="Settransactionpassword">
					<div className="showMsg">{this.state.showMsg}</div>

					<div className="flex_center input_box">
						<div className="box flex_center">
							{this.state.inputTextArray[0] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[1] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[2] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[3] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[4] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[5] && <div className="point"></div>}
						</div>
					</div>
					<div className="warnMsg">{this.state.tips}</div>

					<div className="custkeyboardother">
						<div className="boxleft">
							<div className="cell_line"></div>
							<div className="cell">
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 1)}
								>
									1
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 2)}
								>
									2
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 3)}
								>
									3
								</div>
							</div>
							<div className="cell_line"></div>
							<div className="cell">
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 4)}
								>
									4
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 5)}
								>
									5
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 6)}
								>
									6
								</div>
							</div>
							<div className="cell_line"></div>
							<div className="cell">
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 7)}
								>
									7
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 8)}
								>
									8
								</div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 9)}
								>
									9
								</div>
							</div>
							<div className="cell_line"></div>
							<div className="cell">
								<div className="row" id="-"></div>
								<div className="row_line"></div>
								<div
									className="row"
									onClick={this.handlerKeyBoard.bind(this, 0)}
								>
									0
								</div>
								<div className="row_line"></div>
								<div className="row">
									<img src={keyboard} alt="" />
								</div>
							</div>
						</div>
						<div className="boxright">
							<div className="cell_line"></div>
							<div
								className="row"
								onClick={this.handlerKeyBoard.bind(this, "X")}
							>
								<img src={keyboarddelect} alt="" />
							</div>
							<div className="cell_line"></div>
							<div className="row2" onClick={this.submit.bind(this)}>
								确定
							</div>
						</div>
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_getPayDatas: options => {
			dispatch(getPayDatas(options));
		}
	};
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(Settransactionpassword);
